import config from "@/config.js";

const system = {
    namespaced: true,

    state: {
        theme: localStorage.getItem("darkTheme") ? true : false,
        themeColor: {
            common: {
                baseColor: "#fff",
                primaryColor:
                    localStorage.getItem("primaryColor") || config.primaryColor,
                primaryColorHover:
                    localStorage.getItem("primaryColor") || config.primaryColor,
                successColor: "#389e0d",
                successColorHover: "#389e0d",
                errorColor: "#f5222d",
                errorColorHover: "#f5222d",
                warningColor: "#fa8c16",
                warningColorHover: "#fa8c16",
                borderRadius: "2px",
                borderRadiusSmall: "1px",
                invertedColor: "#fff",
            },
            Checkbox: {
                checkMarkColor: "#eee",
            },
        },
    },

    mutations: {
        TOGGLE_THEME: (state) => {
            let darkTheme = localStorage.getItem("darkTheme");
            if (!darkTheme) localStorage.setItem("darkTheme", "yes");
            else localStorage.clear("darkTheme");
            state.theme = !state.theme;
        },

        CHANGE_THEME: (state, data) => {
            const { primaryColor } = data;
            const { themeColor } = state;
            const { common } = themeColor;
            localStorage.setItem("primaryColor", primaryColor);
            document.documentElement.style.setProperty(
                "--primary-color",
                primaryColor
            );
            let _common = {
                ...common,
                primaryColor,
                primaryColorHover: primaryColor,
            };
            state.themeColor = {
                ...state.themeColor,
                common: _common,
            };
        },
    },
};

export default system;
